<template>
    <view class="auth-login-wrap">
        <u-popup :show="visible" mode="bottom" height="766" border-radius="16" @close="handleClose">
            <view class="login-wrap">
                <!-- #ifdef MP-WEIXIN -->
                <text class="welcome-text">欢迎登录{{ manifest.name }}小程序~</text>
                <!-- #endif -->
                <!-- #ifndef MP-WEIXIN -->
                <text class="welcome-text">欢迎登录{{ manifest.name }}APP~</text>
                <!-- #endif -->
                <text class="tips-text">登录后即可获取更多权益，享受更好的服务体验</text>
                <view class="login-button">
                    <!-- #ifdef MP-WEIXIN -->
                    <u-button type="primary" :ripple="isRipple" @click="handleAuthWxMpUserInfo">手机号一键绑定</u-button>
                    <!-- #endif -->
                    <!-- #ifndef MP-WEIXIN -->
                    <u-button type="primary" :ripple="isRipple" @click="handleToAuth">去登陆</u-button>
                    <!-- #endif -->
                </view>
                <!-- <view class="agreement-wrap">
                    <text class="label-text">点击登录{{ manifest.name }},即表示已阅读并同意</text>
                    <view class="button-wrap">
                        <text class="agreement-text" @click="handleToAgreement('privacyAgree')">《用户隐私条款》</text>
                        <text class="agreement-text" @click="handleToAgreement('userAgree')">《用户服务须知》</text>
                    </view>
                </view> -->
            </view>
        </u-popup>
    </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'auth-login',
    data() {
        return {
            jsCode: '',
            visible: false
        };
    },
    mounted() {
        this.handleOnEvent();
    },
    methods: {
        show() {
            console.log('show')
            this.visible = true;
        },
        hide() {
            this.visible = false;
        },
        // 微信小程序用户信息授权
        handleAuthWxMpUserInfo() {
            this.$authWxMpUserInfo().then(res => {
                this.$toPage({ url: 'pages/auth/mp-weixin/mp-weixin' });
                this.visible = false;
            });
        },
        // 跳转其他登录
        handleToAuth() {
            this.$toPage({
                url: 'pages/auth/auth',
                params: {
                    type: 'passwordLogin'
                }
            });
        },
        // 跳转协议页面
        handleToAgreement(type) {
            this.$toPage({
                url: 'pages/auth/agreement',
                params: {
                    type
                }
            });
        },
        // 监听事件
        handleOnEvent() {
            uni.$on(`auth-login-${this.pageId}`, res => {
                this.visible = true;
            });
        },
        // 弹层关闭事件
        handleClose() {
            this.visible = false
            this.$emit('close');
        }
    },
    computed: {
        ...mapState(['userInfo', 'pageId'])
    }
};
</script>

<style scoped lang="scss">
.auth-login-wrap {
    z-index: 999;
    border-radius: 16rpx;
    .login-wrap {
        display: flex;
        padding: 100rpx 30rpx;
        flex-direction: column;
        .welcome-text {
            color: #000000;
            font-size: 48rpx;
        }
        .tips-text {
            color: #999999;
            font-size: 28rpx;
            margin-top: 20rpx;
        }
        .login-button {
            margin-top: 200rpx;
            ::v-deep .u-btn {
                height: 94rpx;
            }
        }
        .agreement-wrap {
            display: flex;
            padding: 0 44rpx;
            font-size: 24rpx;
            margin-top: 40rpx;
            align-items: center;
            flex-direction: column;
            .label-text {
                color: #999999;
                display: block;
            }
            .button-wrap {
                display: flex;
                align-items: center;
                .agreement-text {
                    color: $u-type-primary;
                }
            }
        }
    }
}
</style>
